<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 
      页面嵌套页面的效果  01 页面看成是 父页面   02 子页面 
     iframe 
     1 src 指定被嵌套的页面 
     2 父子页面 静态资源 不共享
      1 在父页面中定义了样式  .nav 
      2 子页面 不可能拿到这个样式 

    3 iframe 和a标签搭配  
      点击a标签，让 iframe标签的内容切换 
      1 iframe标签 添加一个属性 name 
      2 a标签 target = iframe name属

     -->
  <!--       iframe
可以实现 页中页 效果

父子页面不共享js和css等静态资源

iframe标签经常和a标签相搭配。 a标签的target 属性 要等于 iframe标签的name属性

现在前端项目中 很不推荐使用 iframe -面试题

子页面 想要控制自己跳转 location.href

子页面 想要控制 父页面跳转 window.top.location.href -->



  <!-- <h1>父页面</h1>
     <iframe src="./02-son.html" frameborder="0"></iframe>
     <h1>父页面</h1>
     <script>
       let a=100;
     </script> -->

  <a href="./01.html" target="view">01</a>
  <a href="./02.html" target="view">02</a>


  <iframe src="" name="view" frameborder="0"></iframe>
</body>

</html>